<template>
    <view class="page">
        <u-navbar :title="title" :back-icon-color="'#ffffff'" :title-color="'#ffffff'"
            :background="background"></u-navbar>
        <view>
            <view style="background-color: #f2f2f2; height:100vh;">
                <view style="height: 30rpx;"></view>
                <view class="body-content">
                    <view class="body-content-n">
                        <view class="" style="font-weight: 550; margin-right: 50rpx;">
                            姓名
                        </view>
                        <view class="">
                            <input type="text" style="width: 100%;" @input="nameInput" v-model="form.name"
                                placeholder="请输入收货人姓名" />
                        </view>
                    </view>
                </view>
                <view class="body-content">
                    <view class="body-content-n">
                        <view class="" style="font-weight: 550; margin-right: 50rpx;">
                            电话
                        </view>
                        <view class="">
                            <text style="font-size: 22rpx; color:red;" v-if="verification">请输入正确的手机号</text>
                            <input type="text" style="width: 100%;" @input="numberInput" v-model="form.mobile"
                                placeholder="请输入收货人电话" />
                        </view>
                    </view>
                </view>
                <view style="height: 30rpx;"></view>
                <view class="body-content">
                    <view class="body-content-n" style="margin-right: 30rpx; justify-content: space-between;">
                        <!-- <view class="" style="font-weight: 550; margin-right: 63rpx;">
                    所在地区（省、市、区）
                </view> -->
                        <view class="" style="font-weight:550;width:200rpx;margin-right: 30rpx;">
                            所在地区
                        </view>
                        <view :class="{'gray':!form.province}" @tap='showCityPicker'>{{ pathCity }} > </view>
                    </view>
                    <mpvue-city-picker ref="mpvueCityPicker" :pickerValueDefault="pickerValueDefault"
                        @onConfirm="onConfirm">
                    </mpvue-city-picker>
                </view>
                <view class="body-content">
                    <view class="body-content-n">
                        <view class="" style="font-weight: 550; margin-right: 50rpx;">
                            详细地址
                        </view>
                        <view class="">
                            <input type="text" style="width: 100%;" @input="addressInput" v-model="form.detailed"
                                placeholder="详细地址(街道、门牌号等)" />
                        </view>
                    </view>
                </view>
                <view style="height: 30rpx;"></view>
                <view class="moren">
                    <view class="">设为默认地址</view>
                    <u-switch v-model="form.is_default" class="switch" activeColor="#319978"
                        style="transform:scale(0.9)" @change="switchChange" />
                </view>
                <!-- <view class="uni-list">
            <view class="uni-list-cell uni-list-cell-pd">
                <view class="uni-list-cell-db">设为默认地址</view>
                <switch @change="switchChange" />
            </view>
        </view> -->
                <view style="display: flex; justify-content:center; align-items:center" @click="confirm()">
                    <view class="btn">
                        保存 </view>
                </view>

                <quick-message ref="message"></quick-message>
            </view>
        </view>
        </view>
</template>

<script>
    import {
        setAddress
    } from "@/api/my/address"
    import mpvueCityPicker from '@/pagesA/components/mpvue-citypicker/mpvueCityPicker/mpvueCityPicker.vue'
    // import {
    //     mapActions
    // } from 'vuex'
    export default {
        components: {
            mpvueCityPicker
        },
        data() {
            return {
                // addressType: '2',
                pickerValueDefault: [0, 0, 1],
                verification: false, //手机正则显示提示文字
                form: {
                    // name: "", //收货人
                    mobile: "", //收货人电话
                    province: "", //省
                    city: "", //市
                    area: "", //区
                    detailed: "", //收货人详细地址
                    is_default: 0, //默认地址
                },
                i: -1,
                //是否修改的状态
                isStatus: false,
                background: {
                    // 渐变色
                    backgroundImage: 'linear-gradient(to bottom right, #2e996f, #3f99ab)'
                },
                title:'添加收货地址',
            }
        },
        computed: {
            pathCity() {
                if (this.form.province) {
                    return `${this.form.province}-${this.form.city}-${this.form.area}`
                } else {
                    return '请选择省、市、区';
                }
            }
        },
        onLoad(e) {
            if (e.key) {
                this.title = '修改收货地址'
                // uni.setNavigationBarTitle({
                //     title: "修改地址"
                // })
                this.form = JSON.parse(decodeURIComponent(e.key));
                console.log(this.form, '9999')
                this.isStatus = true;
            }
        },
        methods: {
            // ...mapActions(["createPathFn", 'updatePathFn']),

            /**
             * 返回点击
             */
            onBack() {
                uni.navigateBack();
            },
            showCityPicker() {
                this.$refs.mpvueCityPicker.show();
            },

            onConfirm(e) {
                let arr = e.label.split("-");
                this.form.province = arr[0];
                this.form.city = arr[1];
                this.form.area = arr[2];
                console.log(this.form.province)
            },

            onchange(e) {
                const value = e.detail.value
            },
            onnodeclick(node) {},
            //收货人名字
            nameInput(e) {
                this.form.name = e.detail.value
            },

            //地址
            addressInput(e) {
                this.form.detailed = e.detail.value
            },

            //收货人电话
            numberInput(e) {
                this.form.mobile = e.detail.value
                const phoneReg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
                if (phoneReg.test(this.form.mobile)) {
                    this.verification = false
                } else {
                    this.verification = true
                }
            },
            switchChange: function(e) {
                // uni.showModal({
                //     content: e ? '确定要设为默认地址吗' : '确定要取消默认地址吗',
                //     success: (res) => {
                //         if (res.confirm) {
                //             console.log(e)
                //             if (e == true) {
                //                 this.form.is_default = 1
                //             } else if (e == false) {
                //                 this.form.is_default = 0
                //             }
                //             console.log(this.form.is_default)
                //         }
                //     }
                // })
                 console.log(e,'00000')
                if (e == true) {
                    this.form.is_default = 1
                } else {
                    this.form.is_default = 0
                }
                console.log(this.form.is_default)
            },

            showToast() {
                this.$refs.message.show({
                    msg: this.toastText,
                    type: "error",
                });
            },
            checkAll() {
                return new Promise((resolve, reject) => {
                    if (this.form.name == '') {
                        this.toastText = "请输入收货人姓名";
                        this.showToast();
                        reject();
                    } else if (!this.form.mobile) {
                        this.toastText = "请输入手机号";
                        this.showToast();
                        reject();
                    } else if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.form.mobile)) {
                        this.toastText = "请输入正确的手机号";
                        this.showToast();
                        reject();
                    } else if (!this.form.province) {
                        this.toastText = "请选择所在地区";
                        this.showToast();
                        reject();
                    } else if (!this.form.detailed) {
                        this.toastText = "请输入详细地址";
                        this.showToast();
                        reject();
                    }
                    resolve();
                });
            },
            confirm() {
                this.checkAll().then(() => {
                    if (this.form.id) {
                        this.form.addres_id = this.form.id
                    }
                    setAddress(this.form).then((res) => {
                        console.log(res.code, '9999')
                        if (res.code == 1) {
                            this.$refs.message.show({
                                msg: "保存成功",
                                type: "success"
                            })
                            setTimeout(() => {
                                uni.navigateBack();
                            }, 1000)
                        }
                    }).catch(() => {});
                }).catch(() => {})
            },

        }
    }
</script>

<style scoped>
    .page {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: #f6f6f6;
        }

    .body-content {
        padding-top: 44rpx;
        display: flex;
        align-items: center;
        flex-direction: row;
        justify-content: space-between;
        font-size: 30rpx;
        padding-bottom: 44rpx;
        border-bottom: 1rpx solid #eeeeee;
        padding-left: 30rpx;
        padding-right: 30rpx;
        background: #fff;
        width: 100%;
    }

    .body-content-n {
        display: flex;
        flex-direction: row;
        align-items: center;
        font-size: 30rpx;
        width: 690rpx;
    }

    .moren {
        padding: 30rpx;
        background: #fff;
        display: flex;
        align-items: center;
        flex-direction: row;
        justify-content: space-between;
    }

    .gray {
        color: #999;
        max-width: 450rpx;
    }

    .btn {
        background: linear-gradient(to bottom, #2f9971, #4099ad);
        margin-top: 80rpx;
        width: 690rpx;
        border-radius: 10rpx;
        color: #fff;
        font-size: 32rpx;
        padding: 20rpx;
        text-align: center;
    }
</style>